<template>
    <div class="project-all">

        <div>课题组简介编辑：
            <div id="wangeditor">
                <div ref="editorElem" style="text-align:left;"></div>
            </div>
            <el-button type="primary" size="small" @click="submitTopic">提交</el-button>
        </div>
    </div>

</template>

<script>
import ProjectIntro from "./components/projectIntro"
import Nav from "./components/nav"
import E from "wangeditor";
export default {

    data() {
        return {
            editor: null,
            topic: {
                id :1,
                topicDetail: ''
            },
            initHtml: ''

        }
    },
    mounted() {
        this.getTopic();
        this.editor = new E(this.$refs.editorElem);
        this.editor.customConfig.showLinkImg = true;
        this.editor.customConfig.uploadImgServer = 'http://121.196.151.13:8088/upload/picture';
        this.editor.customConfig.uploadFileName = 'file';

        // 编辑器的事件，每次改变会获取其html内容
        this.editor.customConfig.onchange = html => {
            this.topic.topicDetail = html;
        };
        this.editor.customConfig.menus = [
            // 菜单配置
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'foreColor', // 文字颜色
            'backColor', // 背景颜色
            'link', // 插入链接
            'list', // 列表
            'justify', // 对齐方式
            'quote', // 引用
            'emoticon', // 表情
            'image', // 插入图片
            'table', // 表格
            'code', // 插入代码
            'undo', // 撤销
            'redo' // 重复
        ];
        this.editor.create();
    },
    methods: {
        getTopic() {
            this.centralControl.axios.centralControl(
                'getTopic',
                res => {
                    this.topic=res
                    console.log(this.topic.info)
                    this.editor.txt.html(res.topicDetail)
                },
                {}
            );
        },
        submitTopic(){
            this.centralControl.axios.centralControl(
                'updateTopic',
                res => {
                    this.$message({
                        message: '更新课题组信息成功',
                        type: 'success'
                    });
                    this.$router.push("/projectIntro")
                },
                this.topic
            );
        }
    }
}
</script>

<style lang="less" scoped>
.project-all {
    width: 95%;
    float: none;
    padding: 20px 30px;
    position: relative;
    /* width:870px;     */
    min-height: 500px;
    float:right;
    margin-top: 5px;
    padding: 20px 20px;
    background: #fff;
    border: 2px solid #00659B;
    border-radius: 10px;
    //border-image: -webkit-linear-gradient(#9ac330,#eeec90) 30 30;
    //border-image: -moz-linear-gradient(#9ac330,#eeec90) 30 30;
   // border-image: linear-gradient(#9ac330,#eeec90) 30 30;
}

 .new-ctn {
    height: 646px;
    overflow: hidden;

}
</style>
